<template>
  <div class="ccui-app-container contract-approval">
    <div class="ccui-advanced-search-wrapper ccui-clearfix">
      <el-search
        :formProp="formData"
        @search="search"
        :isShowSearch="isShowSearch"
        :isShow="isShow"
        class="ccui-highsearch"
        :selectClear="true"
        :spoNum="2"
        @change="change"
      >
        <anchorTitle
          isList
          :totalNum="totalNum"
          :tabBtn="tableTopBtn"
          :isFocus="isActive"
          @tabBtnChange="tableTopChange"
        />
        <template slot="search">
          <el-input
            v-model="formData.inventoryCode"
            clearable
            searchLabel="盘点单编号"
            placeholder="请输入盘点单编号查询"
          ></el-input>
          <el-input
            v-model="formData.inventoryName"
            clearable
            searchLabel="盘点单名称"
            placeholder="请输入盘点单名称模糊查询"
          ></el-input>
          <el-input
            v-model="formData.reportInOrgName"
            clearable
            searchLabel="填报单位"
            placeholder="请输入填报单位模糊查询"
          ></el-input>
          <el-input
            v-model="formData.warehouseName"
            clearable
            searchLabel="仓库名称"
            placeholder="请输入仓库名称模糊查询"
          ></el-input>
          <el-select
            class="ccui-form-longInput"
            v-model="formData.operResultTypes"
            searchLabel="审批结果"
            placeholder="请选择审批结果查询"
            clearable
          >
            <el-option
              v-for="item in operResultTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </template>
        <!-- 表单高级搜索 -->
        <el-input
          v-model="formData.inventoryCode"
          clearable
          searchLabel="盘点单编号"
          placeholder="请输入盘点单编号查询"
          slot="searchItem2"
        ></el-input>
        <el-input
          v-model="formData.inventoryName"
          clearable
          searchLabel="盘点单名称"
          placeholder="请输入盘点单名称模糊查询"
          slot="searchItem3"
        ></el-input>
        <el-input
          v-model="formData.reportInOrgName"
          clearable
          searchLabel="填报单位"
          placeholder="请输入填报单位模糊查询"
          slot="searchItem4"
        ></el-input>
        <el-input
          v-model="formData.warehouseName"
          clearable
          searchLabel="仓库名称"
          placeholder="请输入仓库名称模糊查询"
          slot="searchItem5"
        ></el-input>
        <el-select
          class="ccui-form-longInput"
          v-model="formData.operResultTypes"
          searchLabel="审批结果"
          placeholder="请选择审批结果查询"
          slot="searchItem8"
          clearable
        >
          <el-option
            v-for="item in operResultTypes"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-search>
    </div>
    <!-- 表格 -->
    <div class="ccui-multifunctional-table-wrapper">
      <el-table
        ref="multipleTable"
        :data="tableData"
        border
        class="ccui-multifunctional-table"
        @header-dragend="tableTitleWidth"
        @sort-change="sortChange"
        max-height="9999"
        v-if="draggFlag"
      >
        <el-table-column label="序号" width="60" fixed>
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>

        <el-table-column label="盘点单编号" width="200" fixed>
          <template slot-scope="scope">
            <el-button
              @click="handleGoDetail(scope.row, scope.$index, 'pass')"
              type="text"
              >{{ scope.row.businessData.inventoryCode }}</el-button
            >
          </template>
        </el-table-column>

        <template v-for="(table, index) in unfixedTableThead">
          <el-table-column
            :fixed="table.fixed || false"
            :key="'one' + index"
            :type="table.type"
            :label="table.label"
            :align="table.align || 'left'"
            :header-align="table.headerAlign || 'left'"
            :min-width="table.width"
            :prop="table.prop"
            :show-overflow-tooltip="true"
            border="true"
          >
          </el-table-column>
        </template>
        <el-table-column label="审批结果" width="130">
          <template slot-scope="scope">
            {{ scope.row.todoData.operResultTypeString }}
          </template>
        </el-table-column>
      </el-table>
      <div class="ccui-table-footer" v-show="isShowPagination">
        <div id="ccui-paging">
          <el-pagination
            :total="totalNum"
            :page-size="pageSizeCode"
            background
            :current-page="pageNoCode"
            :page-sizes="[10, 20, 50, 100, 200, 500]"
            layout="total, sizes, prev, pager, next, jumper"
            popper-class="ccui-paging-page-size-popper"
            @prev-click="handlePrev"
            @next-click="handleNext"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
          <el-button
            class="ccui-pagination-btn"
            size="mini"
            type="default"
            @click="handleSizeChange('none')"
            >确定</el-button
          >
        </div>
      </div>
    </div>
    <!-- 表格end -->
  </div>
</template>

<script>
import { getFinanceApprovalApproved } from "../api/item-list";
import getPower from "@/basa/utils/getPower.js";
import { setSessionItem, getSessionItem, ishasAgentId } from "@/basa/utils";
import approvalTableMixin from "../mixins/approval-table.js";
import approvalState from "@/config/mixins/smp-state";
import anchorTitle from "@/basa/components/public/anchorTitle";

const operResultTypes = [
  { value: 2, label: "审批通过" },
  { value: 9, label: "审批退回" },
  { value: 4, label: "审批不通过" },
  { value: 6, label: "转审" },
  { value: 5, label: "协办" }
];

const bizStatusType = {
  1: "审批中",
  2: "已撤回",
  3: "审批通过",
  4: "审批退回",
  5: "审批不通过"
};

export default {
  mixins: [getPower, approvalTableMixin, approvalState],
  components: {
    anchorTitle
  },
  data() {
    return {
      operResultTypes,
      isActive: "approvalPass",
      isShowDetail: true,
      isShowEdit: true,
      multiDataToEnd: {},
      singleDataToEnd: {},
      // 表格相关
      tableData: [], // 表格数据
      draggFlag: true,
      tableName: this.tableList.financialInventoryApprovalPass, // 表格命名
      tableThead: [], // 表格数据
      // 锁定表格
      fixedTableThead: [
        {
          label: "序号",
          prop: "id",
          width: "38",
          checked: true,
          fixed: true,
          type: "index",
          resizable: false
        }
      ],
      // 动态表格
      tableTheadOptions: [],
      // 弹框表格
      // popoverShow: false,
      selectRow: [],
      selectData: [],
      isFocus: 1,
      // 表格相关 end
      // 高级搜索数据 start
      formData: {
        inventoryCode: "",
        inventoryName: "",
        reportInOrgName: "",
        warehouseName: ""
      }, // 高级搜索提交数据
      formDataSearch: "",
      localSearchData: {},
      isShowSearch: true,
      // 高级搜索数据 end
      isShowPagination: false, //无数据的不展示底部全选，批量删除
      // 全选以及页码
      totalNum: 0,
      total: 0,
      isIndeterminate: false,
      checkAll: false,
      value: "",
      pageNoCode: 1, // this.getLocalPageNo()
      pageSizeCode: 10, //this.getLocalPageSize()
      // isFist: false,
      // 全选以及页码 end
      // 表格数据删除相关
      delDemoId: "",
      content: "您确定要删除吗？",
      typeDel: "", //有关批量删除
      isSelection: false,
      // 表格数据删除相关 end
      // 排序入参所需字段
      sortord: "",
      sortprop: "",
      // 表格数据相关处理 end
      form: {}
    };
  },
  computed: {},
  watch: {},
  methods: {
    change(index, key, value) {
      const formDataKeys = Object.keys(this.formData);
      formDataKeys.map(_ => {
        if (_ !== key) this.formData[_] = "";
      });
    },

    initData() {
      this.setTableWidth();
      // this.getDatas();
      this.renderTable();
      // this.isFist = false;
    },
    // 表格弹框拖拽触发
    handleTableChange(val) {
      this.tableThead = this.unfixedTableThead.concat(this.fixedTableThead);
      const comment = JSON.stringify(this.tableThead);
      localStorage.setItem(this.tableName, comment);
      const localTableData = JSON.parse(localStorage.getItem(this.tableName));
      this.tableTheadOptions = localTableData;
    },

    // 渲染本地存储表格宽度
    setTableWidth() {
      const localTableData = JSON.parse(localStorage.getItem(this.tableName));
      if (localTableData) {
        for (let i = 0; i < this.tableTheadOptions.length; i++) {
          if (this.tableTheadOptions[i].label === localTableData[i].label) {
            this.tableTheadOptions[i].width = localTableData[i].width;
          }
        }
      }
    },
    // 表格宽度更改存入
    tableTitleWidth(newWidth, oldWidth, column, event) {
      for (let i = 0; i < this.unfixedTableThead.length; i++) {
        if (this.unfixedTableThead[i].label === column.label) {
          this.unfixedTableThead[i].width = newWidth;
        }
      }
      this.tableThead = this.unfixedTableThead.concat(this.fixedTableThead);
      const comment = JSON.stringify(this.tableThead);
      localStorage.setItem(this.tableName, comment);
      this.tableTheadOptions = JSON.parse(localStorage.getItem(this.tableName));
      this.draggFlag = false;
      this.$nextTick(() => {
        this.draggFlag = true;
      });
    },
    // 上一页
    handlePrev() {
      console.log("上一页");
    },
    // 下一页
    handleNext() {
      console.log("下一页");
    },
    // 每页条数发生改变
    handleSizeChange(val) {
      this.pageNoCode = 1;
      if (val !== "none") {
        this.pageSizeCode = val;
        setSessionItem("pageSize", this.tableName, val);
      }
      this.getList(this.formDataSearch);
    },
    // 当前页发生改变
    handleCurrentChange(val) {
      let searchFormData = getSessionItem("pageNo", this.tableName) || {};
      setSessionItem("pageNo", this.tableName, {
        pageNo: val,
        searchForm: searchFormData.searchForm || {}
      });
      this.formDataSearch = {
        ...this.formDataSearch,
        ...searchFormData.searchForm
      };
      // 跳转翻页都会调这个方法
      this.pageNoCode = val;
      this.getList(this.formDataSearch);
    },
    // 高级搜索所需函数 start
    // 高级搜索展开按钮
    search(searchData) {
      this.pageNoCode = 1;
      this.formDataSearch = searchData;
      console.log("searchData", searchData);
      this.localSearchData = JSON.parse(JSON.stringify(searchData));
      setSessionItem("pageNo", this.tableName, {
        pageNo: this.pageNoCode,
        searchForm: this.localSearchData
      });
      console.log("121212121", this.formDataSearch);
      this.getList(this.formDataSearch);
    },

    getList(reqObj) {
      let obj = {};
      obj = typeof reqObj == "object" ? reqObj : obj;
      obj.pageNo = this.pageNoCode;
      obj.pageSize = this.pageSizeCode;
      obj.businessBillTypes = this.formData.businessBillTypes
        ? [this.formData.businessBillTypes]
        : [];
      obj.operResultTypes = this.formData.operResultTypes
        ? [this.formData.operResultTypes]
        : [];
      // 审批结果
      if (this.formData.operResultTypes) {
        if (this.formData.operResultTypes == 9) {
          obj.operResultTypes = [3, 9];
        } else {
          obj.operResultTypes = [this.formData.operResultTypes];
        }
      }
      obj.status = 1;
      obj.isShowPageLoading = true;
      getFinanceApprovalApproved(obj)
        .then(res => {
          console.log("res", res);
          if (res.data.data.rows.length == 0 && this.pageNoCode > 1) {
            this.pageNoCode--; //自减一页
            //重新自调用接口
            this.getList();
            return;
          }
          res.data.data.rows.map(e => {
            e.businessData.reportTime = e.businessData.reportTime
              ? e.businessData.reportTime.substr(0, 10)
              : "";
            e.businessData.exwarehouseCountString = e.businessData
              .exwarehouseCountString
              ? e.businessData.exwarehouseCountString
              : "";
            e.businessData.exwarehouseMoneyString = e.businessData
              .exwarehouseMoneyString
              ? e.businessData.exwarehouseMoneyString
              : "";
          });
          this.isShowPagination = res.data.data.recordsTotal > 0;
          this.tableData = res.data.data.rows.map(e => {
            e.businessData.approvalStatus =
              bizStatusType[e.businessData.approvalStatus];
            return e;
          });

          this.totalNum = res.data.data.recordsTotal;
          this.total = res.data.data.total;
          this.pageNoCode = res.data.data.pageNo; // 当前页
        })
        .catch(e => {
          console.log(e);
        });
    },
    // 排序
    sortChange(params) {
      this.sortord = params.order;
      this.sortprop = params.prop;
      this.getList();
    },
    // 默认显示多少条
    getLocalPageSize() {
      return (
        getSessionItem(
          "pageSize",
          this.tableList.financialInventoryApprovalPass
        ) || 10
      );
    },
    // 读取当前页缓存
    getLocalPageNo() {
      let localData = getSessionItem(
        "pageNo",
        this.tableList.financialInventoryApprovalPass
      );
      return (localData && localData.pageNo) || 1;
    }
  },
  created() {},
  mounted() {
    this.initData();
  },
  beforeRouteLeave(to, from, next) {
    for (var key in this.$vnode.parent.parent.componentInstance.cache) {
      delete this.$vnode.parent.parent.componentInstance.cache[
        ishasAgentId(to.path, key)
      ];
    }
    next();
  },
  activated() {
    if (Object.keys(this.localSearchData).length > 0) {
      setSessionItem("pageNo", this.tableName, {
        pageNo: this.pageNoCode,
        searchForm: this.localSearchData
      });
    }
    let localData = getSessionItem(
      "pageNo",
      this.tableList.financialInventoryApprovalPass
    );
    let data = localData && localData.searchForm;
    this.getList({ ...this.formDataSearch, ...data });
  }
};
</script>
<style lang="scss" scoped>
/deep/.ccui-multifunctional-table {
  .el-table__fixed-right,
  .el-table__fixed {
    height: 100% !important;
  }
}
/deep/.el-search .el-searchs-bottom .el-form .el-row .el-col-12 {
  width: 33.33333%;
}
// 解决表格定位滚动条无法拖动
/deep/ .el-table__fixed-header-wrapper {
  th {
    pointer-events: auto;
  }
}
/deep/ .el-table__fixed,
/deep/.el-table__fixed-right {
  pointer-events: none;
  td {
    pointer-events: auto;
  }
}
.contract-approval {
  /deep/ .el-searchs {
    display: none;
  }
  /deep/ .el-search .icon-ccui-downdown {
    display: none;
  }
}

/deep/.el-search
  .el-searchs-bottom
  .el-form
  .el-row
  .el-col-12:nth-child(1n)
  label {
  width: 130px !important;
}
</style>
